import { inject, onMounted, ref } from "vue"
import { mapStore } from "@/store"
export const drawMap = () => {
    let scene
    let map
    const store = mapStore()
    onMounted(() => {
        scene = inject('$scene')
        map = inject('$map')
    })
    const point = () => {
        store.isDraw = true
        map.on('click', handleDraw)
    }

    function handleDraw(evt) {
        console.log(evt)
        const { lng, lat } = evt.lngLat
        let center = [lng, lat]
        let data = {
            type: 'FeatureCollection',
            features: [
                {
                    type: 'Feature',
                    geometry: {
                        type: 'Point',
                        coordinates: center
                    }
                }
            ]
        }
        var layer = new L7.PointLayer()
        layer.source(data)
            .shape('circle')
            .size(10)
            .color('#ff2d51')
        scene.addLayer(layer)

        map.off('click', handleDraw)
        store.isDraw = false
    }

    const line = () => {
        store.isDraw = true
        const { DrawEvent, DrawLine } = L7.Draw
        const drawLine = new DrawLine(scene, {
            distanceOptions: {},
        });
        drawLine.enable();
        drawLine.on(DrawEvent.Change, (allFeatures) => {
            store.isDraw = false
            drawLine.destroy();
        });
    }
    const polygon = () => {
        store.isDraw = true
        const { DrawEvent, DrawPolygon } = L7.Draw
        const drawPolygon = new DrawPolygon(scene, {
            distanceOptions: {},
        });
        drawPolygon.enable();
        drawPolygon.on(DrawEvent.Change, (allFeatures) => {
            store.isDraw = false
            console.log(drawPolygon)
            drawPolygon.destroy();
        });
    }

    return {
        point,
        line,
        polygon,
    }
}